import { useState } from "react";
import { connect, Link, history } from 'umi';
import { Skeleton, PageHeader, Descriptions, message, Button, Select, Row, Col, Card, Divider, Space, Tabs, Modal } from 'antd';
import styles from './style.less';
import { useEffect } from "react";
import { BugStatus, ConfirmStatus } from '../../ProjectBug/BugPage'
import RichText, { RichTextEdit } from '@/components/RichText'
import EditAble from '@/components/EditAble';
import ArrayUtils from '@/utils/ArrayUtils';
import { PROJECT_BUG_STATUS, PROJECT_BUG_TYPE, PROJECT_BUG_GROUP, PRIORUTY_LEVEL, PROJECT_BUG_REPEAT_TYPE, PROJECT_BUG_FIX_STATUS } from '@/consts/project'
import { formetTime } from '@/utils/dateUtils'
import UserBrief from '@/components/UserBrief';
import PriorityLevel from '../../PriorityLevel'
import ActionDropdown from '@/components/ActionDropdown';
import TextButton from '@/components/TextButton';
import { getDetail, update, deleteBug, updateIsArchived, closeBug, activeBug } from '@/services/project/bug'
import { getBriefDetail } from '@/services/project/qa'
import QaCaseDetailModal from '../../ProjectQA/QaCaseList/QaCaseDetailModal'
import ProjectQaSelect from '@/pages/projects/components/ProjectQA/ProjectQaSelect'
import ProjectComment from '@/pages/projects/components/ProjectComment'
import ProjectItemLog from '@/pages/projects/components/ProjectItemLog'
import ProjectItemLink from '@/pages/projects/components/ProjectItemLink'
import { BugConfirmModal, BugFixModal, BugToUserChangeModal } from './BugAction'
import BugAddModal from './../BugAddModal'
const { Option } = Select;
const { TabPane } = Tabs;


const BugDetail = (props) => {

    const {
        projectId,
        bugId,
        dispatch,
        projectPermission,
        myInfo
    } = props

    const [isDetailTextEditFlag, setIsDetailTextEditFlag] = useState();
    const [isProjectQaItemEditFlag, setIsProjectQaItemEditFlag] = useState();
    const [showAddBugModalVisiable, setShowAddBugModalVisiable] = useState(false)

    const [bugDetail, setBugDetail] = useState({})
    const [qaCaseDetailVisiable, setQaCaseDetailVisiable] = useState(false);

    const [selectChangeToUserBugDetail, setSelectChangeToUserBugDetail] = useState()
    const [selectConfirmBugDetail, setSelectConfirmBugDetail] = useState()
    const [selectFixBugDetail, setSelectFixBugDetail] = useState(false)

    const [projectLogUpdate, setProjectLogUpdate] = useState(0)
    const [tabKey, setTabKey] = useState();
    const [permission, setPermission] = useState({})

    useEffect(() => {
        getDetail(projectId, bugId)
            .then(({ data }) => {
                setBugDetail(data)
            })
    }, [])

    useEffect(() => {
        if (bugDetail) {
            if (myInfo.id === bugDetail.userId) {
                setPermission({
                    ...permission,
                    edit: true,
                    delete: true,
                })
            }
        }
    }, [bugDetail])

    useEffect(() => {
        setPermission({
            ...projectPermission?.bug
        })
    }, [projectPermission])

    if (!bugDetail || bugDetail.id !== bugId) {
        return <div className={styles.detailContainer}><Skeleton></Skeleton></div>
    }

    const onOperationChange = () => {
        setSelectConfirmBugDetail(null)
        setSelectFixBugDetail(null)
        setSelectChangeToUserBugDetail(null)
        getDetail(projectId, bugId)
            .then(({ data }) => {
                setBugDetail(data)
            })
        if (tabKey === "log") {
            setProjectLogUpdate(projectLogUpdate + 1)
        }
    }

    const closeLocalBug = () => {
        closeBug(projectId, bugId, {})
            .then(({ data }) => {
                onOperationChange()
            })
    }

    const activeLocalBug = () => {
        activeBug(projectId, bugId, {})
            .then(({ data }) => {
                let activeCnt = bugDetail?.activeCnt || 0
                console.log(activeCnt)
                setBugDetail({
                    ...bugDetail,
                    status: 4,
                    activeCnt: activeCnt + 1,
                    fixStatus:0
                })
                if (tabKey === "log") {
                    setProjectLogUpdate(projectLogUpdate + 1)
                }
            })
    }

    const updateName = (name) => {
        updateBug({
            name: name,
            oldData: {
                name: bugDetail.name
            }
        })
        bugDetail.name = name;
        setBugDetail({ ...bugDetail })
    }

    const updateProjectUser = (userId, user) => {
        updateBug({
            userId: userId,
            payload: {
                userId: user.nickName
            },
            oldData: {
                userId: bugDetail.userId,
                payload: {
                    userId: bugDetail.user?.nickName
                }
            }
        })
        bugDetail.userId = userId;
        bugDetail.user = user;
        setBugDetail({ ...bugDetail })
    }
    const updateProjectFixUser = (userId, user) => {
        updateBug({
            fixUserId: userId,
            payload: {
                fixUserId: user.nickName
            },
            oldData: {
                fixUserId: bugDetail.fixUserId,
                payload: {
                    fixUserId: bugDetail.fixUser?.nickName
                }
            }
        })
        bugDetail.fixUserId = userId;
        bugDetail.fixUser = user;
        setBugDetail({ ...bugDetail })
    }

    const updateProjectCloseUser = (userId, user) => {
        updateBug({
            closedUserId: userId,
            payload: {
                closedUserId: user.nickName
            },
            oldData: {
                closedUserId: bugDetail.closedUserId,
                payload: {
                    closedUserId: bugDetail.closedUser?.nickName
                }
            }
        })
        bugDetail.closedUserId = userId;
        bugDetail.closedUser = user;
        setBugDetail({ ...bugDetail })
    }

    const updateProjectToUser = (userId, user) => {
        updateBug({
            toUserId: userId,
            payload: {
                toUserId: user.nickName
            },
            oldData: {
                toUserId: bugDetail.toUserId,
                payload: {
                    toUserId: bugDetail.toUser?.nickName
                }
            }
        })
        bugDetail.toUserId = userId;
        bugDetail.toUser = user;
        setBugDetail({ ...bugDetail })
    }
    const updateProjectConfirmUser = (userId, user) => {
        updateBug({
            confirmUserId: userId,
            payload: {
                confirmUserId: user.nickName
            },
            oldData: {
                confirmUserId: bugDetail.confirmUserId,
                payload: {
                    confirmUserId: bugDetail.confirmUser?.nickName
                }
            }
        })
        bugDetail.confirmUserId = userId;
        bugDetail.confirmUser = user;
        setBugDetail({ ...bugDetail })
    }

    const updateFixStatus = (fixStatus) => {
        updateBug({
            fixStatus: fixStatus,
            oldData: {
                fixStatus: bugDetail.fixStatus
            }
        })
        bugDetail.fixStatus = fixStatus;
        setBugDetail({ ...bugDetail })
    }

    const updateStatus = (status) => {
        updateBug({
            status: status,
            oldData: {
                status: bugDetail.status
            }
        })
        bugDetail.status = status;
        setBugDetail({ ...bugDetail })
    }

    const updateType = (type) => {
        updateBug({
            type: type,
            oldData: {
                type: bugDetail.type
            }
        })
        bugDetail.type = type;
        setBugDetail({ ...bugDetail })
    }

    const updateGroupName = (groupName) => {
        updateBug({
            groupName: groupName,
            oldData: {
                groupName: bugDetail.groupName
            }
        })
        bugDetail.groupName = groupName;
        setBugDetail({ ...bugDetail })
    }

    const updateProjectQaItem = (projectQaItemId, projectQaItem) => {

        updateBug({
            projectQaItemId: projectQaItemId,
            payload: {
                projectQaItemId: projectQaItem.name
            },
            oldData: {
                projectQaItemId: bugDetail.projectQaItemId,
                payload: {
                    projectQaItemId: bugDetail?.projectQaItem.name
                },
            }
        })
        bugDetail.projectQaItemId = projectQaItemId;
        bugDetail.projectQaItem = projectQaItem;
        setBugDetail({ ...bugDetail })

        getBriefDetail(projectId, projectQaItemId).then((result) => {
            bugDetail.projectProdItem = result?.data?.projectProdItem
            setBugDetail({ ...bugDetail })
        })
    }

    const updateBugContent = (content) => {
        const oldDataContent = {
            content: {
                text: bugDetail.content.text
            }
        };
        updateBug({
            content: content,
            oldData: oldDataContent
        })
        bugDetail.content = content;
        setBugDetail({ ...bugDetail })
        setIsDetailTextEditFlag(false)
    }

    const updatePriorityLevel = (priorityLevel) => {
        updateBug({
            priorityLevel: priorityLevel,
            oldData: {
                priorityLevel: bugDetail.priorityLevel
            }
        })
        bugDetail.priorityLevel = priorityLevel;
        setBugDetail({ ...bugDetail })
    }

    const updateRepeatType = (repeatType) => {
        updateBug({
            repeatType: repeatType,
            oldData: {
                repeatType: bugDetail.repeatType
            }
        })
        bugDetail.repeatType = repeatType;
        setBugDetail({ ...bugDetail })
    }

    const updateBug = (values) => {
        update(bugDetail.projectId, bugId, values)
            .then(({ success }) => {
                if (success) {
                    message.success("保存成功")
                }
                if (tabKey === "log") {
                    setProjectLogUpdate(projectLogUpdate + 1)
                }
            })
    }

    const updatItemIsArchived = (isArchived) => {
        let title = ""
        if (isArchived === 1) {
            title = '确认归档，归档之后无法编辑，只能在归档列表中显示'
        } else {
            title = "确认撤销归档"
        }
        Modal.confirm({
            title: title,
            okText: '确认',
            cancelText: '取消',
            closable: true,
            onOk: (v) => {
                updateIsArchived(projectId, bugId, isArchived)
                    .then(result => {
                        if (result?.success) {
                            message.success("操作成功")
                            setBugDetail({
                                ...bugDetail,
                                isArchived: isArchived
                            })
                        } else {
                            message.success(result?.errMsg)
                        }
                    })
                return Promise.resolve()
            }
        });
    }

    const deleteItem = () => {
        Modal.confirm({
            title: '确认删除，删除之后将无法恢复',
            okText: '确认',
            cancelText: '取消',
            closable: true,
            onOk: (v) => {
                deleteBug(projectId, bugId)
                    .then(result => {
                        if (result?.success) {
                            message.success("操作成功")
                            history.push(`/projects/${projectId}/bug`)
                        } else {
                            message.success(result?.errMsg)
                        }
                    })
                return Promise.resolve()
            }
        });
    }

    const fixButtonRender = (<Button type="primary" key="fix" onClick={() => {
        setSelectFixBugDetail(bugDetail)
    }}>解决</Button>)

    const renderActionButton = () => {
        let action = []
        if (bugDetail?.isArchived === 0) {
            if (bugDetail?.status === 1) {
                if (bugDetail?.confirmStatus === 0) {
                    action.push(<Button type="primary" key="confirm" onClick={() => {
                        setSelectConfirmBugDetail(bugDetail)
                    }}>确认</Button>)
                }
                action.push(fixButtonRender)
            } else if (bugDetail?.status === 2) {
                action.push(fixButtonRender)
            } else if (bugDetail?.status === 3) {
                action.push(<Button type="primary" key="active" onClick={() => {
                    activeLocalBug()
                }}>激活</Button>)
            } else if (bugDetail?.status === 4) {
                action.push(fixButtonRender)
            } else if (bugDetail?.status === 5) {
                action.push(<Button type="primary" key="active" onClick={() => {
                    activeLocalBug()
                }}>激活</Button>)
            }
            if (bugDetail?.status !== 5) {
                action.push(<Button key="close" onClick={() => {
                    closeLocalBug()
                }}>关闭</Button>)
            }
        }


        return action;
    }

    return <>
        <div className={styles.detailContainer}>
            <PageHeader
                onBack={() => history.go(-1)}
                title={<EditAble permission={permission}
                    value={bugDetail.name}
                    onSave={updateName}
                    editComponentProps={{
                        style: {
                            width: "600px"
                        }
                    }}
                    type="input">
                    {bugDetail.name}
                </EditAble>}
                extra={[
                    ...renderActionButton()
                    ,
                    <ActionDropdown
                        key="action"
                        className={styles.actionDropdown}
                        placement="bottomLeft"
                        actions={[
                            <TextButton key="copy" onClick={() => {
                                setShowAddBugModalVisiable(true)
                            }}
                            >复制</TextButton>,
                            bugDetail?.isArchived === 0 ?
                                <TextButton key="archive" type="warning" onClick={() => {
                                    updatItemIsArchived(1)
                                }}>归档</TextButton> :
                                <TextButton key="archive" type="warning" onClick={() => {
                                    updatItemIsArchived(0)
                                }}>撤销归档</TextButton>
                            ,
                            <TextButton key="delete" type="danger" onClick={() => {
                                deleteItem()
                            }}>删除</TextButton>]}
                    />
                ]}
            >
                <Descriptions column={3}>
                    <Descriptions.Item label='负责人' span={1}>
                        <EditAble permission={permission}
                            value={bugDetail.userId}
                            editComponentProps={{
                                projectId: bugDetail.projectId,
                                defaultOpen: true
                            }}
                            onSave={updateProjectUser}
                            type="userSelect">
                            <UserBrief user={bugDetail.user}></UserBrief>
                        </EditAble>
                    </Descriptions.Item>
                    <Descriptions.Item label='状态' span={1}>
                        <BugStatus status={bugDetail.status}></BugStatus>
                    </Descriptions.Item>
                    <Descriptions.Item label="创建时间" span={1}>{bugDetail.createTime}</Descriptions.Item>
                </Descriptions>
                <Row justify="start" align="top" gutter={8} className={styles.bugDetail}>
                    <Col span={17}>
                        <Card title={'内容'} style={{ marginBottom: '8px' }}>
                            <EditAble permission={permission}
                                isEdit={isDetailTextEditFlag}
                                onEdit={() => {
                                    setIsDetailTextEditFlag(true)
                                }}
                                width="100%"
                                value={bugDetail.content && bugDetail.content.raw}
                                onCancel={() => {
                                    setIsDetailTextEditFlag(false)
                                }}
                                onSave={() => {
                                    setIsDetailTextEditFlag(false)
                                }}
                                useCustomOperate={true}
                                editComponent={
                                    <RichTextEdit
                                        size="small"
                                        onCancel={() => {
                                            setIsDetailTextEditFlag(false)
                                        }}
                                        onSave={updateBugContent}
                                        value={bugDetail.content && bugDetail.content.raw}>
                                    </RichTextEdit>
                                }>
                                <RichText
                                    ellipsis
                                    value={bugDetail.content && bugDetail.content.text}>
                                </RichText>
                            </EditAble>
                        </Card>
                        <Card style={{ minHeight: '200px' }}>
                            <Tabs
                                activeKey={tabKey}
                                tabBarGutter={-8}
                                tabBarStyle={{ margin: 0 }}
                                onChange={(atk) => {
                                    setTabKey(atk)
                                    if (atk === "log") {
                                        setProjectLogUpdate(projectLogUpdate + 1)
                                    }
                                }}
                            >
                                <TabPane tab="评论" key="comment">
                                    <ProjectComment projectId={projectId} bizId={bugDetail?.id} bizType="bug" />
                                </TabPane>
                                <TabPane tab="日志" key="log">
                                    <ProjectItemLog
                                        projectId={projectId}
                                        itemId={bugDetail?.id}
                                        update={projectLogUpdate}
                                        renderField={(value, fieldName, isDetail) => {
                                            if (fieldName === "status") {
                                                return <BugStatus status={value}></BugStatus>
                                            }
                                            if (fieldName === "type") {
                                                return PROJECT_BUG_TYPE[value]?.name
                                            }
                                            if (fieldName === "groupName") {
                                                return value
                                            }
                                            if (fieldName === "priorityLevel") {
                                                return <PriorityLevel priorityLevel={value}></PriorityLevel>
                                            }
                                            if (fieldName === "repeatType") {
                                                return PROJECT_BUG_REPEAT_TYPE[value].name
                                            }
                                            if (fieldName === "confirmStatus") {
                                                return <ConfirmStatus confirmStatus={value} />
                                            }
                                            if (fieldName === "fixStatus") {
                                                return PROJECT_BUG_FIX_STATUS[value]?.name
                                            }
                                        }}
                                        renderModalWidth={(fieldName) => {

                                        }}
                                        renderFieldName={(fieldName) => {
                                            if (fieldName === "projectQaItemId") {
                                                return "关联测试项"
                                            }
                                            if (fieldName === "type") {
                                                return "类型"
                                            }
                                            if (fieldName === "groupName") {
                                                return "归属"
                                            }
                                            if (fieldName === "priorityLevel") {
                                                return "优先级"
                                            }
                                            if (fieldName === "repeatType") {
                                                return "重复情况"
                                            }
                                            if (fieldName === "toUserId") {
                                                return "指派人"
                                            }
                                            if (fieldName === "closedUserId") {
                                                return "指派人"
                                            }
                                            if (fieldName === "confirmStatus") {
                                                return "确认状态"
                                            }
                                            if (fieldName === "fixStatus") {
                                                return "解决状态"
                                            }
                                            if (fieldName === "fixUserId") {
                                                return "解决人"
                                            }
                                        }}
                                        itemType="bug" />
                                </TabPane>
                            </Tabs>
                        </Card>
                    </Col>
                    <Col span={7}>
                        <Card >
                            <Descriptions column={1} title="基本信息" >
                                <Descriptions.Item label='所属迭代' span={1}>
                                    <ProjectItemLink {...{
                                        name: bugDetail?.projectProdItem?.name,
                                        id: bugDetail?.projectProdItem?.id,
                                        projectId: bugDetail.projectId,
                                        type: "PROD"
                                    }} />
                                </Descriptions.Item>
                                <Descriptions.Item label='关联测试项' span={1}>
                                    <EditAble permission={permission}
                                        isEdit={isProjectQaItemEditFlag}
                                        onEdit={() => {
                                            setIsProjectQaItemEditFlag(true)
                                        }}
                                        value={bugDetail?.projectQaItem?.id}
                                        onCancel={() => {
                                            setIsProjectQaItemEditFlag(false)
                                        }}
                                        onSave={() => {
                                            setIsProjectQaItemEditFlag(false)
                                        }}
                                        editComponent={
                                            <ProjectQaSelect
                                                onSelect={(projectQaItemId, projectQaItem) => {
                                                    updateProjectQaItem(projectQaItemId, projectQaItem)
                                                    setIsProjectQaItemEditFlag(false)
                                                }}
                                                projectId={projectId}
                                                defaultValue={bugDetail?.projectQaItem?.id} />
                                        }>
                                        <ProjectItemLink {...{
                                            name: bugDetail?.projectQaItem?.name,
                                            id: bugDetail?.projectQaItem?.id,
                                            projectId: bugDetail.projectId,
                                            type: "QA"
                                        }} />
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='关联用例' span={1}>
                                    <TextButton onClick={() => {
                                        setQaCaseDetailVisiable(true)
                                    }}>{bugDetail?.projectQaCase?.name}</TextButton>
                                </Descriptions.Item>
                                <Descriptions.Item label='类型' span={1}>
                                    <EditAble permission={permission}
                                        value={bugDetail.type}
                                        editComponentProps={{
                                            options: ArrayUtils.jsonToArray(PROJECT_BUG_TYPE).map(item => {
                                                return { value: item.key, label: item.value.name }
                                            }),
                                            defaultOpen: true
                                        }}
                                        onSave={updateType}
                                        type="select">
                                        {PROJECT_BUG_TYPE[bugDetail.type].name}
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='归属' span={1}>
                                    <EditAble permission={permission}
                                        value={bugDetail.groupName}
                                        editComponentProps={{
                                            options: ArrayUtils.jsonToArray(PROJECT_BUG_GROUP).map(item => {
                                                return { value: item.key, label: item.value.name }
                                            }),
                                            defaultOpen: true
                                        }}
                                        onSave={updateGroupName}
                                        type="select">
                                        {PROJECT_BUG_GROUP[bugDetail.groupName].name}
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='优先级' span={1}>
                                    <EditAble permission={permission}
                                        value={bugDetail.priorityLevel}
                                        editComponentProps={{
                                            options: ArrayUtils.jsonToArray(PRIORUTY_LEVEL).map(item => {
                                                return { value: item.key, label: item.value.name }
                                            }),
                                            defaultOpen: true
                                        }}
                                        onSave={updatePriorityLevel}
                                        type="select">
                                        <PriorityLevel priorityLevel={bugDetail.priorityLevel}></PriorityLevel>
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='复现情况' span={1}>
                                    <EditAble permission={permission}
                                        value={bugDetail.repeatType}
                                        editComponentProps={{
                                            options: ArrayUtils.jsonToArray(PROJECT_BUG_REPEAT_TYPE).map(item => {
                                                return { value: item.key, label: item.value.name }
                                            }),
                                            defaultOpen: true
                                        }}
                                        onSave={updateRepeatType}
                                        type="select">
                                        {PROJECT_BUG_REPEAT_TYPE[bugDetail.repeatType].name}
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='指派人' span={1}>
                                    <EditAble permission={permission}
                                        isEdit={!!selectChangeToUserBugDetail}
                                        onEdit={() => {
                                            setSelectChangeToUserBugDetail(bugDetail)
                                        }}
                                        value={bugDetail.toUserId}
                                        onCancel={() => {
                                            setSelectChangeToUserBugDetail(null)
                                        }}
                                        onSave={() => {
                                            setSelectChangeToUserBugDetail(null)
                                        }}
                                        useCustomOperate={true}
                                        editComponent={
                                            <UserBrief user={bugDetail.toUser}></UserBrief>
                                        }>
                                        <UserBrief user={bugDetail.toUser}></UserBrief>
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='是否确认' span={1}>
                                    <ConfirmStatus confirmStatus={bugDetail.confirmStatus} />
                                </Descriptions.Item>
                                <Descriptions.Item label='确认人' span={1}>
                                    {bugDetail.confirmUser && <UserBrief user={bugDetail.confirmUser}></UserBrief>}
                                </Descriptions.Item>
                                <Descriptions.Item label='抄送人' span={1}>
                                    <Space wrap style={{ width: '100%' }}>
                                        {bugDetail.ccUserList && bugDetail.ccUserList.map(user => <UserBrief key={user.id} showAvatar={false} user={user} />)}
                                    </Space>
                                </Descriptions.Item>
                            </Descriptions>
                            <Divider></Divider>
                            <Descriptions column={1} title="解决情况" >
                                <Descriptions.Item label='解决状态' span={1}>
                                    {PROJECT_BUG_FIX_STATUS[bugDetail.fixStatus].name}
                                </Descriptions.Item>
                                <Descriptions.Item label='解决人' span={1}>
                                    <EditAble permission={permission}
                                        value={bugDetail.fixUserId}
                                        editComponentProps={{
                                            projectId: bugDetail.projectId,
                                            defaultOpen: true
                                        }}
                                        onSave={updateProjectFixUser}
                                        type="userSelect">
                                        {bugDetail.fixUser && <UserBrief user={bugDetail.fixUser}></UserBrief>}
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='解决时间' span={1}>
                                    {bugDetail.fixDate}
                                </Descriptions.Item>
                            </Descriptions>
                            <Divider></Divider>
                            <Descriptions column={1} title="验证情况" >
                                <Descriptions.Item label='激活次数' span={1}>
                                    {bugDetail.activeCnt || 0}
                                </Descriptions.Item>
                                <Descriptions.Item label='关闭人' span={1}>
                                    <EditAble permission={permission}
                                        value={bugDetail.closedUserId}
                                        editComponentProps={{
                                            projectId: bugDetail.projectId,
                                            defaultOpen: true
                                        }}
                                        onSave={updateProjectCloseUser}
                                        type="userSelect">
                                        {bugDetail.closedUser && <UserBrief user={bugDetail.closedUser}></UserBrief>}
                                    </EditAble>
                                </Descriptions.Item>
                                <Descriptions.Item label='关闭时间' span={1}>
                                    {bugDetail.closedDate}
                                </Descriptions.Item>

                            </Descriptions>
                        </Card>
                    </Col>
                </Row>
            </PageHeader>
        </div>
        <BugConfirmModal bugDetail={selectConfirmBugDetail}
            onSuccess={onOperationChange}
            onCancel={() => setSelectConfirmBugDetail(null)} />
        <BugFixModal bugDetail={selectFixBugDetail}
            myInfo={myInfo}
            onSuccess={onOperationChange}
            onCancel={() => setSelectFixBugDetail(null)} />
        <BugToUserChangeModal bugDetail={selectChangeToUserBugDetail}
            onSuccess={onOperationChange}
            onCancel={() => setSelectChangeToUserBugDetail(null)} />
        <QaCaseDetailModal
            qaCase={bugDetail.projectQaCase}
            visible={qaCaseDetailVisiable}
            onCancel={() => {
                setQaCaseDetailVisiable(false)
            }}
        />
        <BugAddModal
            visible={showAddBugModalVisiable}
            projectId={projectId}
            copyBugId={bugDetail.id}  
            onCancel={() => {
                setShowAddBugModalVisiable(false)
            }}
            onSaveSuccess={(data) => {
                history.push(`/projects/${projectId}/bug/${data.id}`)
            }}
        />
    </>
}


export default connect(({ user }) => ({
    myInfo: user.myInfo
}))(BugDetail);